<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<title>江西省大组工网网络监管平台</title>
<head>
    <link rel="stylesheet" href="./swiper-bundle.min.css"/>
    <style>
        @font-face {
            font-family: AlibabaPuHuiTi-Bold;
            font-weight: bold;
            src: url("./otf/AlibabaPuHuiTi-3-85-Bold.ttf") format("opentype");
        }

        @font-face {
            font-family: DINCond-Medium-Regular;
            src: url("./otf/DINCond-Medium-Regular.otf") format("opentype");
        }

        .numFont {
            font-family: DINCond-Medium-Regular;
        }

        a {
            text-decoration: none;
            color: inherit;
            cursor: pointer;
        }

        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            color: '#fff';
            font-size: 14px;
        }

        body {
            display: flex;
            flex-direction: column;
            background: url('./img/city_bg.png') no-repeat;
            color: #fff;
            background-size: cover;
        }

        .title {
            height: 80px;
            line-height: 80px;
            padding-left: 38px;
            font-size: larger;
            font-weight: 600;
            text-align: center;
            padding: 0 10px;
        }

        .content {
            display: flex;
            height: 100%;
            margin: 0 10px 0 10px;
            padding-bottom: 10px;
            flex: 1;
        }

        .l-top, .l-bittom, .c-top, .c-bottom, .r-top, .r-center, .r-bottom {
            height: 50%;
        }

        .center {
            flex: 1;
            /* border: 1px solid red; */
            margin: 0 10px;
            display: flex;
            flex-direction: column;
        }

        .right, .l-top, .l-bittom, .c-top, .c-bottom, .r-top, .r-center, .r-bottom {
            display: flex;
            flex-direction: column;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="center" id="container">
        <a href="/big/navigation" class="back" style="width:205px;height: 60px;
      margin: 8px auto;line-height: 60px;cursor: pointer;position:fixed;display: grid;
bottom: 34px;text-align: center; background: url('./img/backindex.png') no-repeat;background-size: cover;background-position: center;">
            返回首页
        </a>
        <div class="back" style="margin: 8px auto;position:fixed;right:160px;text-align: center;">
						<span class="jump provinces" style="border: 1px solid;padding: 0 12px;height: 34px;margin: 8px auto;line-height: 34px;
						       cursor: pointer;display:inline-block;background: #0060AA;border: 1px solid #0060AA;">
							省直机关
						</span>
            <a href="/big/city" class="jump citys" style="border: 1px solid;padding: 0 12px;height: 34px;margin: 8px auto;line-height: 34px;
						       cursor: pointer;display:inline-block;background: #0D1119;border: 1px solid #015B87;">
                市直机关
            </a>
        </div>
        <div class="back" style="margin: 8px auto;position:fixed;right:160px;
									bottom:140px;text-align: center;">
            <div class="orgNum numFont"
                 style="font-weight: 900;color: #EDF3FF;font-size: 80px;text-shadow: 3px 0px 7px #000000;
                         font-family: DINCond-Medium-Regular;background: url('./img/accessNum.png') no-repeat;background-size: contain;background-position: bottom;">
                0
            </div>
            <div style="font-size: 18px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color:#EDF3FF;">
                已接入省直机关数
            </div>
        </div>
    </div>
</div>
</body>
<script src="./jquery-3.7.0.min.js"></script>
<script src="./g6.min.js"></script>
<script type="application/javascript">


    const data = { nodes: [], edges: [] };
    for (let i = 0; i < 32; i++) {
        data.nodes.push({
            id: `${i}`,
            label: i < 17 ? `employee-${i}` : `company-${i - 17}`,
            dataType: i < 17 ? 'employee' : 'company',
            style: i < 17 ?
                { stroke: '#5D7092', fill: '#5D7092', fillOpacity: 0.5 } :
                { stroke: '#5B8FF9', fill: '#5B8FF9', fillOpacity: 0.5 }
        });
    }



    const container = document.getElementById('container');
    const width = container.scrollWidth;
    const height = container.scrollHeight || 500;
    const graph = new G6.Graph({
        container: 'container',
        width,
        height,
        modes: {
            default: ['drag-canvas', 'drag-node'],
        },
        animate: true,
        nodeStateStyles: {
            activeByLegend: {
                lineWidth: 5,
                strokeOpacity: 0.5,
                stroke: '#f00'
            },
            inactiveByLegend: {
                opacity: 0.5
            }
        },
        layout: {
            pipes: [
                {
                    type: 'circular',
                    nodesFilter: (node) => (+node.id) <= 6,
                    center: [width / 5 * 4 - 30, height / 2],
                    radius: width / 10
                },
                {
                    type: 'circular',
                    nodesFilter: (node) => ((+node.id) >= 7 && (+node.id) <= 10),
                    center: [width / 20 + 30, height / 3 * 2],
                    radius: width / 20
                },
                {
                    type: 'circular',
                    nodesFilter: (node) => ((+node.id) >= 11 && (+node.id) <= 16),
                    center: [width / 20 + 30, height / 3],
                    radius: width / 20
                },
                {
                    type: 'grid',
                    nodesFilter: (node) => (+node.id) > 16,
                    begin: [width / 10 + 50, 10],
                    width: width / 5 * 3 - 100,
                    height: height - 40,
                }
            ],
        },
    });
    graph.data(data);
    graph.render();

    if (typeof window !== 'undefined')
        window.onresize = () => {
            if (!graph || graph.get('destroyed')) return;
            if (!container || !container.scrollWidth || !container.scrollHeight) return;
            graph.changeSize(container.scrollWidth, container.scrollHeight);
        };

</script>
</html>
